﻿<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>加载WMS服务地图</title>
    <!--导入外部样式表-->
    <link href="../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
    <!--必要的脚本引用-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="json" src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        body,
        html,
        div,
        ul,
        li,
        iframe,
        p,
        img {
            border: none;
            padding: 0;
            margin: 0;
        }

        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }

        #menu {
            text-align: center;
            width: 100%;
            height: 20px;
            padding: 5px 10px;
            font-size: 14px;
            font-family: "微软雅黑";
        }

        .checkbox {
            margin: 0px 10px;
        }
    </style>
</head>

<body>
    <div id="mapCon">
    </div>
    <script type="text/javascript">
        var wmsLayer = null; //WMS地图图层
        //实例化Map对象加载地图,默认底图加载MapQuest地图
        var map = new ol.Map({
            target: 'mapCon',
            view: new ol.View({
                center: [11550000, 3860000],
                zoom: 3
            })
        });

        var { protocol, ip, port } = window.webclient;
        //实例化WMS图层对象（ol.layer.Image，ol.source.ImageWMS）
        wmsLayer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                //WMS服务基地址
                url: `${protocol}://${ip}:${port}/igs/rest/ogc/doc/WorldJWVector/WMSServer`,
                //图层等参数
                params: {
                    'LAYERS': '世界政区',
                    'TILED': true
                },
                //服务类型
                serverType: 'geoserver'
            })
        });
        //添加WMS地图图层
        map.addLayer(wmsLayer);
    </script>
</body>

</html>